<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线人数统计</title>
    <script src="../js/axios.min.js"></script>
    <script>
        function init(){
            axios.get("../online.s").then(res=>{
                let ol = document.querySelector("ol");
                let html = "";
                for( let user in res.data){
                    let time = res.data[user];
                    time = new Date().getTime() - parseInt(time);
                    // time 表示在线时间秒值
                    time = time / 1000;
                    html += `<li><label>${user}</label><small>${time}秒</small></li>`
                }
                ol.innerHTML = html;
            })
        }
    </script>
</head>
<body onload="init()">
<fieldset>
    <legend>在线人数统计</legend>
    <dl>
        <dt>共有 5 人在线</dt>
        <dd>
            <ol>
                <li><label>曹盖</label><small>在线3小时06分钟</small></li>
                <li><label>鲁智深</label><small>在线4小时13分钟</small></li>
                <li><label>扈三娘</label><small>在线5小时33分钟</small></li>
                <li><label>燕青</label><small>在线2小时24分钟</small></li>
                <li><label>花荣</label><small>在线1小时25分钟</small></li>
            </ol>
        </dd>
    </dl>
</fieldset>

</body>
</html>


<style>
    * {
        vertical-align: middle;
        text-decoration: none;
    }

    fieldset {
        width: 50%;
        margin: 40px auto;
    }

    div {
        line-height: 50px;
    }

    span {
        display: inline-block;
        width: 200px;
        line-height: 30px;
        vertical-align: middle;
        color: red
    }

    input<small>span<small>select {
        min-width: 200px;
        height: 30px;
        text-align: center;
        box-sizing: border-box;
    }

    label {
        min-width: 70px;
        display: inline-block;
        padding: 0px 5px;
        box-sizing: border-box;
    }

    small{
        color: #999999;
        margin-left: 20px;
    }

    legend{
        background-color: #ddd;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        color: #555;
    }

</style>